<template>
  <div class="Index">
    <Head :chuang="ConName" />
    <full-page :options="options" ref="fullpage" class="fullpage">
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <HomePage />
        </div>
      </div>
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <ProductAndService />
        </div>
      </div>
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <SolveScheme />
        </div>
      </div>
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <Case />
        </div>
      </div>
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <About></About>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
import Head from './components/Head.vue';
import HomePage from './HomePage/HomePage.vue';
import ProductAndService from './ProductAndService/ProductAndService.vue';
import SolveScheme from './SolveScheme/SolveScheme.vue';
import Case from './Case/CaseIndex.vue';
import About from './AboutUs/AboutUs.vue';

export default {
  components: {
    Head,
    HomePage,
    ProductAndService,
    SolveScheme,
    Case,
    About
  },
  name: 'Home',
  data() {
    return {
      ConName: '首页',
      fullHeight: document.documentElement.clientHeight,
      options: {
        licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
        afterLoad: this.afterLoad,
        scrollOverflow: true,
        menu: '#menu',
        css3: true,
        // ture 导航就会下拉隐藏 上划显示
        scrollBar: false
        // navigation: true,//是否顯示導航
        // anchors: ['index', 'prod', 'plan', 'ex' ,'abt', 'news'],
        // sectionsColor: [
        //   "#41b883",
        //   "#ff5f45",
        //   "#0798ec",
        //   "#fec401",
        //   "#1bcee6",
        //   "#ee1a59",
        //   "#2c3e4f",
        //   "#ba5be9",
        //   "#b4b8ab",
        // ],
      }
    };
  },
  watch: {
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    }
  },
  methods: {
    next() {
      // 往下切换
      this.$refs.fullpage.api.moveSectionDown();
    },
    get_bodyHeight() {
      const that = this;
      window.onresize = () => {
        return () => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        };
      };
    }
  },
  created() {
    this.get_bodyHeight();
  }
};
</script>

<style lang="less">
.Index {
  height: auto;
  .fullpage {
    height: auto;
  }
}
</style>
<style scoped>
.section >>> .page {
  height: 100% !important;
}
</style>
